<template>
  <div style=" border-bottom: 1px solid rgba(151, 151, 151, 0.2);" class="from-input-box">
    <div class="from-input-tit cenLeft ">
      <span :class="{'checkNot':!thisComponen.attribute.ifCheck}" class=" from-input-tit-check">
        *
      </span>
      {{ thisComponen.attribute.titName }}
    </div>
    <input v-if='isReadonly' type="text" class="from-input" style=" cursor: pointer;text-align: left;" v-model.trim="thisComponen.attribute.filedValue" readonly="readonly" :maxLength="thisComponen.attribute.maxLength" :placeholder="thisComponen.attribute.placeholder">
    <co-select v-else v-model.trim="thisComponen.attribute.filedValue" style=" cursor: pointer;" :title="`${thisComponen.attribute.titName}`" :search-placeholder="`请输入${thisComponen.attribute.titName}`" :type="selectList.length>10?'popup':'picker'" :data="selectList" :placeholder="thisComponen.attribute.placeholder" class="from-input" />
    <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
      <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
    </div>
  </div>
</template>
<script>
export default {
  props: ["thisComponen", "isReadonly"],
  data() {
    return {
      selectList: [
        // {
        //   label: "Option 1",
        //   value: 1
        // }
      ] //选项
    };
  },
  created() {
    this.selectList = [];
    let selectList = this.thisComponen.attribute.selectList;
    for (let i = 0; i < selectList.length; i++) {
      let obj = {
        label: selectList[i].name,
        value: selectList[i].name
      };
      this.selectList.push(obj);
    }
  }
};
</script>
<style >
.from-input > svg {
  display: none;
}
.from-input::after {
  height: 0px;
}
</style>

